<template>
	<el-container>
		<el-header>
			<div class="left-panel"></div>
			<div class="right-panel">
				<div class="right-panel-search">
					<el-select v-model="reqParams.classify" clearable placeholder="警报分类">
						<el-option
							v-for="item in alarmClassifyOptions"
							:key="item.code"
							:label="item.name"
							:value="item.code" />
					</el-select>
					<RangeDate @change="rangeDateChange" />
					<el-button icon="el-icon-search" type="primary" @click="search" />
				</div>
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTable ref="table" :api-obj="apiObj" :column="column" :params="reqParams" hideContextMenu>
				<template #level="{ data }">
					<el-tag disable-transitions :type="tagLevel(data.level)">
						{{ data.levelDesc }}
					</el-tag>
				</template>

				<template #status="{ data }">
					<el-tag disable-transitions :type="data.status == 1 ? 'danger' : 'success'">
						{{ data.status == 1 ? "警报中" : "已关闭" }}
					</el-tag>
				</template>
			</scTable>
		</el-main>
	</el-container>
</template>

<script>
import RangeDate from "../../../components/RangeDate";

export default {
	components: {
		RangeDate,
	},
	data() {
		return {
			alarmClassifyOptions: [],
			apiObj: this.$API.equipalarmrecord.page,
			reqParams: {
				classify: '',
				startTime: '',
				endTime: '',
			},
			column: [
				{ prop: "id", label: "id", width: 100, hide: true },
				{ prop: 'lineName', label: '产线名称', width: 140 },
				{ prop: 'equipName', label: '设备名称', width: 100 },
				{ prop: 'classify', label: '警报分类', width: 100 },
				{ prop: 'content', label: '警报内容', width: 200 },
				{ prop: 'level', label: '警报等级', width: 100 },
				{ prop: 'startTime', label: '开始时间', width: 120 },
				{ prop: 'endTime', label: '结束时间', width: 120 },
				{ prop: 'duration', label: '警报时长 (分钟)', width: 120 },
				{ prop: 'status', label: '警报状态', width: 80 },
			],
		};
	},
	mounted() {
		this.init();
	},
	methods: {
		rangeDateChange(rangeDate) {
			if (rangeDate !== null) {
				this.reqParams.startTime = rangeDate[0];
				this.reqParams.endTime = rangeDate[1];
			}
		},
		tagLevel(level) {
			const types = ['', 'danger', 'warning', 'info', 'success', ''];
			return types[level];
		},
		search() {
			this.$refs.table.refresh();
		},
		async init() {
			const resp2 = await this.$API.syscodetype.bycode.get('mes_alarm_classify');
			this.alarmClassifyOptions = resp2.data.codes.map(s => ({ name: s.name, code: s.codeValues }));
		}
	},
};
</script>

<style scoped>
.input {
	width: 160px;
}
</style>
